<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/commom.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=bVhXlaPpURqYlnO4C5kljjS8plbjyqTr">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script src="js/InfoBox.js"></script>
    <script src="js/vue.js"></script>

    <title>顺和国际智慧物流园疫情防控云数据</title>
    <link rel="stylesheet" href="css/driver.css">
    <link rel="stylesheet" href="css/asidenav.css">
</head>

<body>

    <div class="page">
        <div class="title">
            <div class="titleTxt">顺和国际智慧物流园疫情防控云数据</div>
            <div class="time">
                <div id="showTime"></div>
                <!-- <div id="localtime"></div> -->
                <script type="text/javascript">
                    function showLocale(objD) {
                        var str, colorhead, colorfoot;
                        var yy = objD.getYear();
                        if (yy < 1900) yy = yy + 1900;
                        var MM = objD.getMonth() + 1;
                        if (MM < 10) MM = '0' + MM;
                        var dd = objD.getDate();
                        if (dd < 10) dd = '0' + dd;
                        var hh = objD.getHours();
                        if (hh < 10) hh = '0' + hh;
                        var mm = objD.getMinutes();
                        if (mm < 10) mm = '0' + mm;
                        var ss = objD.getSeconds();
                        if (ss < 10) ss = '0' + ss;
                        var ww = objD.getDay();

                        str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                        //alert(str);
                        return str;
                    }

                    function tick() {
                        var today;
                        today = new Date();
                        document.getElementById("showTime").innerHTML = showLocale(today);
                        window.setTimeout("tick()", 1000);
                    }
                    tick();
                </script>

            </div>
        </div>
        <div class="page">
            <div class="ball">
                <svg width="0" height="0">
                    <defs>
                        <filter id="goo">
                            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
                            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
                                result="goo"></feColorMatrix>
                            <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
                        </filter>
                    </defs>
                </svg>
                <div class="aside-nav bounceInUp animated" id="aside-nav">
                    <label for="" class="aside-menu" title="按住拖动">菜单</label>

                    <a href="#" onclick="index()" title="首页" class="menu-item menu-first">首页</a>
                    <a href="#" onclick="order()" title="订单" class="menu-item menu-second">订单</a>
                    <a href="#" onclick="car()" title="车辆" class="menu-item menu-third">车辆</a>

                </div>
            </div>

            <script>
                function index() {
                    window.location.href = "index.html"
                }

                function order() {
                    window.location.href = "order.html"
                }

                function car() {
                    window.location.href = "driver.html"
                }
            </script>
            <script src="js/asidenav.js"></script>
            <div class="content">
                <div class="contentLeft">
                    <div class="contentLeftTop">
                        <div class="titleTxtsecond">网点发车量走势图</div>

                        <div id="driver"></div>
                        <script type="text/javascript">
                            var dom = document.getElementById("driver");
                            var myChart2 = echarts.init(dom);
                            option2 = {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['发车量', '发车量1'],
                                    // x: 'right',
                                    y: '0',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                grid: {
                                    top: '16%',
                                    left: '2%',
                                    right: '10%',
                                    bottom: '2%',
                                    containLabel: true
                                },
                                xAxis: {
                                    name: '排名',
                                    nameTextStyle: {
                                        color: "#fff"
                                    },
                                    type: 'category',
                                    boundaryGap: true,
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc', //左边线的颜色
                                            width: '1' //坐标线的宽度
                                        },
                                        symbol: ['none', 'arrow']
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: '#fff', //坐标值得具体的颜色

                                        },
                                    },
                                    data: []
                                },
                                yAxis: {

                                    name: '发车量',
                                    nameTextStyle: {
                                        color: "#fff"
                                    },
                                    type: 'value',
                                    min: 0,

                                    splitNumber: 3,
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc', //左边线的颜色
                                            width: '1' //坐标线的宽度
                                        },
                                        symbol: ['none', 'arrow']
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: '#fff', //坐标值得具体的颜色
                                        }
                                    },
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            type: 'dotted',
                                            color: '#666'
                                        },
                                    }
                                },
                                series: [{
                                        name: '',
                                        type: 'bar',
                                        stack: '总量',
                                        barWidth: 20,
                                        // itemStyle: {
                                        //     normal: {
                                        //         color: "#f0be25",
                                        //         lineStyle: {
                                        //             color: "#f0be25"
                                        //         } /*折线颜色更改*/
                                        //     }
                                        // },
                                        itemStyle: { //上方显示数值
                                            normal: {
                                                color: function(params) {
                                                    var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                                                    return colorList[params.dataIndex]
                                                },
                                                label: {
                                                    show: true, //开启显示
                                                    position: 'top', //在上方显示
                                                    textStyle: { //数值样式
                                                        color: '#ffffff',
                                                        fontSize: 14
                                                    }
                                                }
                                            }
                                        },
                                        // itemStyle: {
                                        //     normal: {
                                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                                        //             offset: 0,
                                        //             color: "#38B2E6"
                                        //         },
                                        //         {
                                        //             offset: 1,
                                        //             color: "#0B3147"
                                        //         }
                                        //         ]),
                                        //         opacity: .8
                                        //     },
                                        // },
                                        data: []
                                    },

                                    {
                                        name: '',
                                        type: 'line',
                                        stack: '数量',
                                        itemStyle: {
                                            normal: {
                                                color: "#f0be25",
                                                lineStyle: {
                                                    color: "#f0be25"
                                                } /*折线颜色更改*/
                                            }
                                        },
                                        data: []
                                    }

                                ]
                            };;
                            if (option2 && typeof option2 === "object") {
                                myChart2.setOption(option2, true);
                            }
                            myChart2.setOption(option2);
                            /*窗口自适应，关键代码*/
                            $(window).resize(function() {
                                myChart2.resize();
                            });

                            function getData() {
                                $.ajax({
                                    /***********初始化获取全部设备坐标********/
                                    url: API_SERVER_URL + "dispatch_depart",
                                    type: 'POST',
                                    // contentType: 'application/json',
                                    // header: {
                                    //     // 'Content-type': 'application/x-www-form-urlencoded'
                                    //     //"content-type":"application/json"
                                    //     "Access-Control-Allow-Origin": '*'
                                    // },
                                    datatype: 'jsonp',
                                    // data: '',
                                    success: function(data) {
                                        //console.log(data)
                                        myChart2.setOption({
                                                xAxis: {
                                                    data: data.echartX
                                                },
                                                series: [{
                                                    name: '',
                                                    data: data.echartY
                                                }, {
                                                    name: '数量',
                                                    data: data.echartY
                                                }, ]
                                            })
                                            // this.resultData = data
                                            // this.echatX = data.echatX
                                            // //console.log(echatX)
                                            // function initPieEcharts(data)

                                    },
                                    error: function(e) {
                                        //console.log(e)
                                    }
                                })
                            }
                            setInterval(getData, 10000); //定时器
                            getData();
                        </script>
                    </div>
                    <div class="contentLeftMiddle">
                        <div class="titleTxtsecond">车型统计</div>
                        <div id="fache"></div>
                        <script type="text/javascript">
                            var dom = document.getElementById("fache");
                            var myChart1 = echarts.init(dom);
                            option1 = {
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                                },
                                series: [{
                                    name: '车型占比',
                                    type: 'pie',
                                    radius: '80%',
                                    center: ['50%', '50%'],
                                    selectedMode: 'single',
                                    avoidLabelOverlap: false,
                                    label: {
                                        normal: {
                                            show: true,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: "12"
                                            },
                                            formatter: '{b}\n{d}%',

                                            padding: [0, -10],
                                            // position: 'inner'
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                fontSize: '15',
                                                fontWeight: 'bold'
                                            },


                                        }
                                    },

                                    labelLine: { //指示线状态
                                        show: true,
                                        smooth: 0,
                                        length: 8,
                                        length2: 30
                                    },
                                    itemStyle: {
                                        // normal: {

                                        //     shadowColor: 'rgba(0, 0, 0, 0.5)',
                                        //     shadowBlur: 10,
                                        //     shadowOffsetX: 10,
                                        //     shadowOffsetY: 10

                                        // }
                                    },


                                    data: []
                                }]
                            };;



                            if (option1 && typeof option1 === "object") {
                                myChart1.setOption(option1, true);
                            }

                            myChart1.setOption(option1);

                            /*窗口自适应，关键代码*/
                            $(window).resize(function() {
                                myChart1.resize();
                            });

                            function getData() {
                                $.ajax({
                                    /***********初始化获取全部设备坐标********/
                                    url: API_SERVER_URL + "dispatch_carType",
                                    type: 'POST',
                                    // contentType: 'application/json',
                                    // header: {
                                    //     // 'Content-type': 'application/x-www-form-urlencoded'
                                    //     //"content-type":"application/json"
                                    //     "Access-Control-Allow-Origin": '*'
                                    // },
                                    datatype: 'jsonp',
                                    // data: '',
                                    success: function(data) {
                                        //console.log(data)
                                        var result = data.data
                                            //console.log(result)
                                        var names = []; //定义两个数组
                                        var nums = [];
                                        $.each(result, function(key, values) { //此处我返回的是list<String,map<String,String>>循环map
                                            names.push(values.name);
                                            var obj = new Object();
                                            obj.name = values.name;
                                            obj.value = values.value;
                                            nums.push(obj);
                                            // //console.log(obj)
                                        });

                                        myChart1.setOption({ //加载数据图表
                                            // legend: {
                                            //     data: names
                                            // },
                                            series: {
                                                // 根据名字对应到相应的系列
                                                name: ['车型占比'],
                                                data: nums
                                            }
                                        });
                                        // myChart3.setOption({
                                        //     series: {
                                        //         // 根据名字对应到相应的系列
                                        //         name: ['合计'],
                                        //         data: data
                                        //     }
                                        // })
                                        // this.resultData = data
                                        // this.echatX = data.echatX
                                        // //console.log(echatX)
                                        // function initPieEcharts(data)

                                    },
                                    error: function(e) {
                                        //console.log(e)
                                    }
                                })
                            }
                            setInterval(getData, 10000); //定时器
                            getData();
                        </script>
                    </div>
                    <div class="contentLeftBottom">
                        <div class="titleTxtsecond">实时运费结算</div>
                        <div class="yunfei">
                            <div class="yunfeiTitle">
                                <div class="yunfeiCol">运单</div>
                                <div class="yunfeiCol">车牌号</div>
                                <div class="yunfeiCol">收款账号</div>
                                <div class="yunfeiCol">支付运费</div>
                            </div>
                            <!-- <div class="yunfeiBox" id="list">
                            <div class="yunfeiBoxContents" id="tb1">
                                
                            </div>
                            <div class="yunfeiBoxContentss" id="tb2">
                              
                            </div>

                        </div> -->
                            <div class="yunfeiBox list_lh">

                                <ul class="yunfeiBoxContents">

                                </ul>



                            </div>


                        </div>
                        <script src="js/scroll.js"></script>
                        <script>
                            getdata()

                            function getdata() {

                                $.ajax({

                                    /***********初始化获取全部设备坐标********/
                                    url: API_SERVER_URL + "settled_freight_settlement",
                                    type: 'POST',
                                    // contentType: 'application/json',
                                    // header: {
                                    //     'Content-type': 'application/x-www-form-urlencoded'
                                    //     //"content-type":"application/json"
                                    //      //"Access-Control-Allow-Origin": '*'
                                    // },
                                    // contentType: "application/json; charset=utf-8",
                                    datatype: 'jsonp',
                                    // data: '',
                                    success: function(data) {
                                        //console.log(data)
                                        var resultLists = data.data;
                                        //console.log(resultLists.length)
                                        // $(".orderListContent").html('')

                                        for (var i = 0; i < resultLists.length; i++) {
                                            resultLists[i]
                                            if (resultLists[i].carNum == null) {
                                                resultLists[i].carNum = ''
                                            }
                                            if (resultLists[i].bankCardNo == null) {
                                                resultLists[i].bankCardNo = ''
                                            }
                                            var str = '<li class="yunfeiBoxContent" ><div class="yunfeiCol">' + resultLists[i].orderSn + '</div><div class="yunfeiCol">' + resultLists[i].carNum + '</div><div class="yunfeiCol">' + resultLists[i].bankCardNo + '</div><div class="yunfeiCol">' + resultLists[i].payAmount +
                                                '</div></li>'

                                            $(".yunfeiBoxContents").append(str);
                                        }
                                        $(function() {

                                            $("div.list_lh").myScroll({
                                                speed: 30, //数值越大，速度越慢
                                                rowHeight: 32 //li的高�?
                                            });
                                        });
                                        // $("div.orderListContentBox").myScroll({

                                        //     speed: 40, //数值越大，速度越慢
                                        //     rowHeight: 68 //li的高�?
                                        // });
                                    },
                                    error: function(e) {
                                        //console.log(e)
                                    }
                                })
                            }
                        </script>
                    </div>
                </div>
                <div class="contentMiddle">
                    <div id="map"></div>
                </div>

                <div class="contentRight">
                    <div class="contentRightTop">
                        <div class="titleTxtsecond">区域货量排行榜</div>
                        <div class="quyu" id="quyu">
                            <div class="quyuTitle">
                                <div class="quyuCol">排名</div>
                                <div class="quyuCol">区域</div>
                                <div class="quyuCol">货量(kg)</div>
                            </div>
                            <div class="quyuBox">
                                <div class="quyuBoxContent" v-for="(item, index) in result" :key="index">
                                    <div class="quyuCol"><span :class="getRankCls(index)">{{getRankText(index)}}</span>
                                    </div>
                                    <div class="quyuCol" :title="item.totalArea">{{item.receiverPro}}</div>
                                    <div class="quyuCol">{{item.totalWeight}}</div>

                                </div>

                            </div>

                        </div>
                        <script>
                            new Vue({
                                el: '#quyu',
                                data: {
                                    // message: 'Hello Vue.js!',
                                    // isShow: 'false'

                                    result: [],
                                    // url: '/images/1.png',
                                    // url1: '/images/2.png',
                                    // url2: '/images/3.png',
                                    // url3: '/images/4.png',
                                },
                                mounted: function() {
                                    // getQueryString("id")
                                    // this.getsInfo();
                                    this.getData();
                                    setInterval(this.getData, 5000);
                                },
                                methods: {
                                    getRankCls(index) {
                                        if (index <= 2) {
                                            return `icon icon${index}`
                                        } else {
                                            return 'icon icons'
                                        }
                                    },
                                    getRankText(index) {
                                        if (index > 2) {
                                            return index + 1
                                        }
                                    },
                                    getData: function() {
                                        var that = this
                                        $.ajax({

                                            /***********初始化获取全部设备坐标********/
                                            url: API_SERVER_URL + "order_cargo_volume",
                                            type: 'POST',
                                            // contentType: 'application/json',
                                            // header: {
                                            //     'Content-type': 'application/x-www-form-urlencoded'
                                            //     //"content-type":"application/json"
                                            //      //"Access-Control-Allow-Origin": '*'
                                            // },
                                            // contentType: "application/json; charset=utf-8",
                                            datatype: 'jsonp',
                                            // data: '',
                                            success: function(data) {

                                                //console.log(data)
                                                that.result = data.data
                                                    //console.log(that.result)
                                            },
                                            error: function(e) {
                                                //console.log(e)
                                            }
                                        })
                                    }

                                },
                            })
                        </script>
                    </div>
                    <div class="contentRightBottom">
                        <div class="titleTxtsecond">司机异常驾驶预警</div>
                        <div class="yujing" id="yujing">
                            <div class="yujingTitle">
                                <div class="yujingCol">车牌号</div>
                                <div class="yujingCol">手机号</div>
                                <div class="yujingCol">预警类型</div>
                                <div class="yujingColTime">预警时间</div>
                            </div>
                            <div class="yujingBox">
                                <div class="yujingBoxContent" v-for="(item, index) in result" :key="index" :class="[item.type=== '疲劳驾驶' ? 'red':item.type==='超速驾驶'? 'yellow':item.type==='异常刹车'? 'green':'blue']">
                                    <div class="yujingCol">
                                        {{item.carNum}}
                                    </div>
                                    <div class="yujingCol">
                                        {{item.mobile}}
                                    </div>
                                    <div class="yujingCol">
                                        {{item.type}}
                                    </div>
                                    <div class="yujingColTime">
                                        {{item.warningTime}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            new Vue({
                                el: '#yujing',
                                data: {
                                    // message: 'Hello Vue.js!',
                                    // isShow: 'false'

                                    result: [],
                                    // url: '/images/1.png',
                                    // url1: '/images/2.png',
                                    // url2: '/images/3.png',
                                    // url3: '/images/4.png',

                                },
                                mounted: function() {
                                    // getQueryString("id")
                                    // this.getsInfo();
                                    this.getData();
                                    setInterval(this.getData, 5000);
                                },
                                methods: {
                                    // classUrl(index){
                                    //    //console.log(this.result)
                                    //     if(this.result.type==="疲劳驾驶"){

                                    //                 return `yujingBoxContent red`
                                    //             }
                                    // },
                                    // getRankCls(index) {
                                    //     if (index <= 2) {
                                    //         return `icon icon${index}`
                                    //     } else {
                                    //         return 'icon icons'
                                    //     }
                                    // },



                                    getData: function() {
                                        var that = this;
                                        $.ajax({

                                            /***********初始化获取全部设备坐标********/
                                            url: API_SERVER_URL + "driver_warn",
                                            type: 'POST',
                                            // contentType: 'application/json',
                                            // header: {
                                            //     'Content-type': 'application/x-www-form-urlencoded'
                                            //     //"content-type":"application/json"
                                            //      //"Access-Control-Allow-Origin": '*'
                                            // },
                                            // contentType: "application/json; charset=utf-8",
                                            datatype: 'jsonp',
                                            // data: '',
                                            success: function(data) {

                                                //console.log(data)
                                                that.result = data.data
                                                    //     var ms=that.result
                                                    //     console.log("2222222222222")
                                                    //   console.log( ms)
                                                    //     var ss = ms.type
                                                    //     console.log("11111111111")
                                                    //   console.log( ss)
                                                    //     if ( ss = "疲劳驾驶") {
                                                    //         that.type = 3
                                                    //     } else if ( ss = "超速驾驶") {
                                                    //         that.type = 1
                                                    //     } else if ( ss = "异常刹车") {
                                                    //         that.type = 0
                                                    //     } else {
                                                    //         that.type = 2
                                                    //     }



                                            },
                                            error: function(e) {
                                                //console.log(e)
                                            }
                                        })
                                    },



                                },
                            })
                        </script>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>



<script type="text/javascript">
    var map;
    var openArr = [];
    initMap();
    console.log(openArr)
        //创建和初始化地图函数：
    function initMap() { ///初始化地图
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        //addMarker(); //向地图中添加marker

        // var _data = {
        //     status: 'A'
        // }
        $.ajax({
            /***********初始化获取全部设备坐标********/

            url: API_SERVER_URL + "car_list",
            type: 'post',
            // contentType: 'application/json',
            datatype: 'json',
            async: false,
            data: '',
            success: function(data) {
                console.log(data)
                if (data.code == 1) {
                    // initMap();

                    var arr = data.data;
                    var carNums = '';
                    var order_type = "";
                    // var statusList = 'A';
                    // var equipmentCode = '';
                    console.log(arr)
                    var arr_point = [];

                    for (var i = 0; i < arr.length; i++) {

                        var point = new BMap.Point(arr[i].lon, arr[i].lat);
                        // console.log(point)
                        var carNums = arr[i].carNum;
                        var order_type = arr[i].order_type;
                        openArr.push({
                            carNums,
                            order_type,
                            point
                        })

                        arr_point.push(point);

                        // console.log(arr_point)
                        var myIcon = new BMap.Icon("images/hc3.png", new BMap.Size(200, 80));
                        var marker = new BMap.Marker(point, {
                            icon: myIcon,
                            zIndex: 98
                        }); // 创建标注
                        marker.carNums = arr[i].carNum;
                        marker.order_type = arr[i].order_type;
                        // console.log(marker.carNums)
                        var label = new BMap.Label("车牌号" + arr[i].carNum + "</br>" + "当前位置" + arr[i].province + arr[i].city + arr[i].country + "</br>" + arr[i].adr, {
                            offset: new BMap.Size(50, -100)
                        });
                        label.setStyle({
                            display: "none",
                            color: "#fff",
                            backgroundColor: "#333333",
                            border: "0",
                            fontSize: "14px",
                            width: "200px",
                            opacity: "0.8",
                            verticalAlign: "center",
                            borderRadius: "2px",
                            whiteSpace: "normal",
                            wordWrap: "break-word",
                            padding: "7px",

                        });

                        marker.setLabel(label);
                        marker.addEventListener("mouseover", function(e) {
                            marker.setTop(true, 27000000);
                            var label = this.getLabel()

                            label.setStyle({
                                display: "block"
                            });
                        });
                        marker.addEventListener("mouseout", function(e) {
                            marker.setTop(false)
                            var label = this.getLabel()
                            label.setStyle({
                                display: "none"
                            });
                        });
                        map.addOverlay(marker); //将标记添加到地图中
                        // arr_point.push(point);
                        marker.addEventListener("click", attribute);
                    }

                    map.setViewport(arr_point);
                } else {
                    //console.log(data.msg)
                }

                // setTimeout(function () {
                //     for (const key in openArr) {
                //         openArr[key].close()
                //     }
                // }, 2000)
            },
            error: function(e) {
                //console.log(e)
            }
        })

    }

    openWebSocket()
    var websocket = null;

    function openWebSocket() {
        var url = API_SERVER_URLS + "driver";
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket(url);
        } else {
            console.log('当前浏览器 Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function() {
            setMessageInnerConsole("WebSocket连接发生错误");
        };
        //连接成功建立的回调方法
        websocket.onopen = function() {
                setMessageInnerConsole("WebSocket连接成功");
            }
            //接收到消息的回调方法
        websocket.onmessage = function(event) {
                setMessageInnerHTML(event.data);
            }
            //连接关闭的回调方法
        websocket.onclose = function() {
            setMessageInnerConsole("WebSocket连接关闭");
        }
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
            closeWebSocket();
        }
        //将消息显示在网页上
        // setMessageInnerHTML()
    function setMessageInnerHTML(data) {

        var dataObj = eval("(" + data + ")");
        console.log(dataObj)
            // for (var i = 0; i < openArr.length; i++) {
            //     console.log(openArr[i].carNum)
            //     if (openArr[i].carNums == innerHTML.carNum) {
            //         // var a = openArr[i].point
            //         console.log(openArr[i].point)
            //     }
            // }

        if (dataObj.code == 1) {
            if (openArr != null) {
                for (var i = 0; i < openArr.length; i++) {
                    console.log(dataObj.carNum)
                    if (openArr[i].carNums == dataObj.carNum) {
                        var aMap = openArr[i].point
                            //console.log("162123131")
                            //console.log(openArr[i].point)
                            //console.log(aMap)
                    }
                    //console.log(openArr[i].carNums)
                }
                html = ['<div class="arrBox" >', '</div>', '<div class="arrBoxBottom">', '<div>', '车牌号', dataObj.carNum, '</div>', '<div>', dataObj.type, '</div>', '</div>']
                var InfoBox = new BMapLib.InfoBox(map, html.join(""), {
                    boxStyle: {
                        background: 'url(images/jingbao.png) center no-repeat',
                        'background-size': "100% 100%",
                        width: "220px",
                        height: "140px",
                        'border-radius': "7px",
                        padding: '10px'
                    },
                    offset: {
                        width: 0,
                        height: 34
                    },
                    enableAutoPan: true,
                    // closeIconUrl:'',
                    align: INFOBOX_AT_TOP
                })
                InfoBox.open(new BMap.Point(aMap.lng, aMap.lat));
                setTimeout(function() {
                    InfoBox.close()
                }, 5000)
            }
        } else {
            if (openArr != null) {

                for (var i = 0; i < openArr.length; i++) {
                    console.log(dataObj.orderSn)
                    if (openArr[i].carNums == dataObj.carNum) {
                        var aMap = openArr[i].point
                            //console.log(openArr[i].point)
                            //console.log(aMap)
                    }
                    //console.log(openArr[i].carNums)
                }
                html = ['<div class="arrBox" >', '订单已完成', '</div>', '<div class="arrBoxBottom">', '<div>', '订单号', dataObj.orderSn, '</div>', '</div>']
                var InfoBox = new BMapLib.InfoBox(map, html.join(""), {
                    boxStyle: {
                        background: 'url(images/newOrder.png) center no-repeat',
                        'background-size': "100% 100%",
                        width: "220px",
                        height: "140px",
                        'border-radius': "7px",
                        padding: '10px'
                    },
                    offset: {
                        width: 0,
                        height: 34
                    },
                    enableAutoPan: true,
                    // closeIconUrl:'',
                    align: INFOBOX_AT_TOP
                })
                InfoBox.open(new BMap.Point(aMap.lng, aMap.lat));
                setTimeout(function() {
                    InfoBox.close()
                }, 5000)

            }
        }

    }
    // aa(openArr)
    // function aa(openArr) {
    // }
    //document.getElementById('message').innerHTML += innerHTML + '<br/>';
    //将消息显示在网页上
    function setMessageInnerConsole(innerHTML) {
        //console.log(innerHTML)
        //document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.onclose = function() {
            setMessageInnerConsole("WebSocket连接关闭");
        }
    }
    //获取覆盖物位置
    function attribute(e) {
        // var p = e.target;
        // alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
        //console.log(this.equipmentCode)
        // var equipmentCode = this.equipmentCode;
        // var statusList = '';
        // fff(statusList, equipmentCode)
        // console.log(this.carNums)
        var carNum = this.carNums;
        var order_type = this.order_type;

        window.location.href = "detailsTwo.html?value=" + carNum + "&order_type=" + order_type;
    }
    setInterval(getData, 10000); //定时器
    //创建地图函数：
    function createMap() {
        map = new BMap.Map("map"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(116.249684, 36.569412); //定义一个中心点坐标
        map.centerAndZoom(point, 6); //设定地图的中心点和坐标并将地图显示在地图容器中
        // window.map = map; //将map变量存储在全局
        map.setMapStyleV2({
            styleId: '04ec7db1deb55c04daa364702d68652e'
        });
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard(); //启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_ZOOM
        });
        map.addControl(ctrl_nav);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
    }

    //标注点数组
    // var markerArr = [{
    //     title: "",
    //     content: "",
    //     point: "116.248938|36.569259",
    //     isOpen: 0,
    //     icon: {
    //         w: 21,
    //         h: 21,
    //         l: 46,
    //         t: 46,
    //         x: 1,
    //         lb: 10
    //     }
    // }];




    /*****************************************获取设备信息**************************************************/
    //创建和初始化地图
</script>